<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        li{
            list-style: none;
        }
 #whole{
     height: 100%;
     position: relative;
 }
#whole .header,#whole .footer{
    position: fixed;
    left: 0;
    z-index: 10000;
    width: 100%;
}
#whole .header{
    top:0;
}
#whole .footer  {
    bottom: 0;
}
#whole .content{
    width: 100%;
    position: absolute;
    left: 0;
    top:43px;
    background-color: red;
}

    </style>
</head>
<body>
<body>
 <div data-role="page" id="whole">
     <div data-role="header" class="header">
         <h1>首页</h1>
     </div>
     <div data-role="content" class="content">
         <ul>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
         </ul>
     </div>
     <div data-role="footer" class="footer"></div>
 </div>

</body>
</body>
</html>